<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:white;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;

}

@keyframes myfirst
{
0%   {background:white; left:0px; top:0px;}
25%  {background:white; left:100px; top:100px;}
50%  {background:white; left:200px; top:200px;}
75%  {background:white; left:100px; top:100px;}
100% {background:white; left:0px; top:0px;}
}

</style>
</head>
<body>



<div><svg width="100" height="100" id="svg-smile" class="face" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" stroke="#BCC15B" stroke-width="4" fill="#2B2332" />
    <line x1="60" y1="30" x2="70" y2="33" class="eye-line green" />
    <line x1="30" y1="33" x2="40" y2="30" class="eye-line green" />
    <circle cx="35" cy="43" r="4" fill="#BCC15B" class="eye" />
    <circle cx="65" cy="43" r="4" fill="#BCC15B" class="eye" />
    <polyline points="48,40 45,60 57,60 0" class="nose green"></polyline>
    <path d="M 30 68 q 18 15 40 0" class="mouth green" />
</svg></div>

</body>
</html>
